﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
<link rel="stylesheet" th:href="@{/css/common.css}">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script th:src="@{/js/jquery.min.js}"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script th:src="@{/js/bootstrap.min.js}"></script>

<!-- treeView -->
<script type="text/javascript" th:src="@{/js/bootstrap-treeview.js}"></script>
</head>
<body>
	<div id="tree"></div>
	
	<!-- treeview菜单按钮组 -->
    <div class="btn-group-vertical" role="group" style="display:none;" id="disDiv">
       <button type="button" class="btn btn-default" onclick="addMenu();"><span class="glyphicon glyphicon-plus"></span> 新增</button>
       <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-minus-sign"></span> 删除</button>
       <button type="button" class="btn btn-default" onclick="toupdateMenu();"><span class="glyphicon glyphicon-edit"></span> 修改</button>
    </div>
	
	<!-- 菜单修改所需要的表单 -->
    <div id="toupdatemenuForm" style="display:none;left:35%;top:30%;position:absolute;width: 500px;border:red dashed 1px;">
        <div class="panel panel-success" style="padding:0;margin: 0;">
          <div class="panel-heading">
            <h3 class="panel-title">编辑菜单表单 <span class="glyphicon glyphicon-remove-circle" style="float: right;" onclick="deleteMenu();"></span></h3>
          </div>
          <div class="panel-body">
             <div id="initDiv" style="display: block"></div>
             <div style="display: none" id="toupdateMenudis">
              <form class="form-group" id="toupdateForm">
                  <input type="hidden" name="parentid" id="toupdatepid">
                  <input type="hidden" name="nodeid" id="toupdatenodeid">
                <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
                  <div class="input-group">
                    <div class="input-group-addon">菜单名称</div>
                    <input type="text" class="form-control" name="text" id="toupdateMenuText" placeholder="请输入菜单名称">
                  </div>
                </div>
                <div class="form-group" style="display:block;margin-bottom: 15px;margin-left: 70px;">
                  <div class="input-group">
                    <div class="input-group-addon">菜单路径</div>
                    <input type="text" class="form-control" id="toupdateMenuUrl" name="href" placeholder="请输入菜单路径">
                  </div>
                </div>
                <button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="submitToUpMenu();">确认提交</button>
                <button type="button" class="btn btn-success" style="margin-left: 100px;" onclick="resetMenu();">重新选择</button>
              </form>
             </div>
          </div>
        </div>
    </div>
</body>
<script th:inline="javascript">

	var tree = [{
	    id: 0,
	    text: "根节点",
	    sequence: "sequence-0",
	    state: null,
	    icon: "",
	    selectable: true, //标记节点是否可以选择。false表示节点应该作为扩展标题，不会触发选择事件。  string
	    state: { //描述节点的初始状态    Object
            checked: true, //是否选中节点
            /*disabled: true,*/ //是否禁用节点
            expanded: true, //是否展开节点
            selected: true //是否选中节点
        },
        tags: ['标签信息1', '标签信息2'], //向节点的右侧添加附加信息（类似与boostrap的徽章）    Array of Strings
	    nodes: [{
	        id: 1,
	        text: "淘宝",
	        sequence: "sequence-0-1",
	        state: null,
	        href: "/user/view",
	    }, 
	    {
	        id: 1,
	        text: "百度",
	        sequence: "sequence-0-1",
	        state: null,
	        href: "/role/view",
	    }, 
	    {
	        id: 2,
	        text: "公司",
	        sequence: "sequence-0-2",
	        state: null,
	        nodes: [{
	            id: 1,
	            text: "华为",
	            sequence: "sequence-0-2-1",
	            state: null,
	        },
	        {
	            id: 2,
	            text: "小米",
	            sequence: "sequence-0-2-1",
	            state: null,
	        }
	        ]
	    }]
	}];
	
	$(function(){
		nodes.init();
	});
	
	var nodes = {
			init:function(){
				this.loadNodes();
			},
			// 获取 node 节点
			loadNodes:function(){
				$.ajax({
					url:"/treeView/list",
					success:function(result){
						result = JSON.parse(result);
						$('#tree').treeview({
							data: result.data,
							//enableLinks: true,
							// 节点选中
							onNodeSelected:function(event, node) {
							    if(node.href != "" && node.href != null && node.href != undefined){
							    	parent.frames['mainFrame'].document.location.href = node.href;
							    }
							},
							// 几点展开
							onNodeExpanded:function(event, node){
								console.info("event="+event)
								console.info("node="+node.icon)
							}
						});
					}
				});
			}
	}
	
	
	
	//给treeview绑定事件并给移动隐藏的按钮组.
    //并且通过getNode获得节点内容赋值给指定的按钮组的框内，并设定右键菜单两秒之后消失。
    $("#tree").on("mousedown",'li',function(event){
            //通过事件的which属性判断是不是右键点击
            if (event.which == 3) {
                var v_clientX = event.clientX;
                var v_clientY = event.clientY;
                $("#disDiv").css({
                    display:'block',
                    position:'absolute',
                    'left':v_clientX+3,
                    'top':v_clientY-3
                });
                var nodeid = $(this).attr("data-nodeid");
                var node = $("#tree").treeview('getNode', nodeid);
                $("#parentid").val(node.nodeid);
                $("#pnode").val(node.text);
                setTimeout("$('#disDiv').css('display','none')",2000);
            }
        })
        
            //禁用treeview的原生浏览器菜单：
    $("#tree").on("contextmenu",function(event){
        return false;
    });
    //新增菜单
    function addMenu(){
        $("#toupdatemenuForm").css("display","none");
        $("#menuForm").css('display','block');
        $("#menuText").val("");
        $("#menuUrl").val("");
    }
    //删除菜单界面
    function deleteMenu(){
        $("#menuForm").css('display','none');
        $("#toupdatemenuForm").css("display","none");
    }
    //修改的回显
    function toupdateMenu(){
        $("#initDiv").css("display","block");
        $("#toupdateMenudis").css("display","none");
        $("#toupdatemenuForm").css("display","block");
        $("#menuForm").css('display','none');
        $.post("<%=request.getContextPath() %>/menu/queryMenu",function(result){
            var tree = result;
            $("#initDiv").treeview(
                    {
                        data:tree,
                        onNodeSelected: function (event,data) {
                            if (data.href != "" && data.href != null) {
                                var v_text = data.text;
                            }
                        }
                    }
            );
            //选中节点
            $("#initDiv").on('nodeSelected',function(event,data) {
                $("#toupdatepid").val(data.parentid);
                $("#toupdatenodeid").val(data.nodeid);
                $("#toupdateMenuText").val(data.text);
                $("#toupdateMenuUrl").val(data.href);
                $("#initDiv").css("display","none");
                $("#toupdateMenudis").css("display","block");
            });
        });
    }


    //重新回到回显页面
    function resetMenu(){
        $("#initDiv").css("display","block");
        $("#toupdateMenudis").css("display","none");
    }
</script>
</html>
